﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sinkbreaker - Single player game</title>
    <script src="Scripts/jquery-2.0.0.js"></script>
    <script src="Scripts/fabric.js"></script>
    <link href="Styles/fabricTESTS.css" rel="stylesheet" />
    <link href="Styles/introjs/introjs.css" rel="stylesheet" />
    <script src="Styles/introjs/intro.min.js"></script>  

    <link href="Styles/style.css" rel="stylesheet" />
</head>

<body class="ingame">

    <a href="index.html" class="button home-btn" >Home</a>

    <div id="wrapper">
        

        <div id="logo">
            <img src="Images/logo.png" />
        </div>
        <div id="currPlayer" data-intro="Това е името на играча" data-step="1">Бай Иван</div>

        <div id="maxPath" data-intro="Това е максималният път, който трябва да извървиш, преди да поставиш някоя фигура" data-step="3">Max Path</div>
        <div id="currMove" data-intro="Толкова стъпки си направил" data-step="4" data-position="right">0 / 0</div>

        <div id="inner-wrapper" class="clearfix">
            <div id="cover"></div>
            <canvas id="c" height="360"></canvas>
            <div id="overlaps"  data-intro="Схема на фигурите, така че да следиш къде се покриват" data-step="6" data-position="left"></div>
        </div>

        <div id="sink" data-intro="Това е мивката, която Бай Иван троши като се изнерви здраво." data-step="2" data-position="top"></div>
        <div id="nerva" data-intro="Показва колко е нервата в момента" data-step="5" data-position="left"></div>

        <div id="chat-container">
            <ul id="chat">
            </ul>
        </div>
    </div>

    <script src="Scripts/Custom/JSGraph.js"></script>
    <script src="Scripts/Custom/engine.js"></script>
    <audio src="Audio/click.wav" controls="controls" id="clickAudio" class="hidden" />
    <script>
        introJs().start();
        var canvas = new fabric.Canvas('c');
        var engine = new Engine(500, 360, 20, false);

        engine.startGame(engine.generateFigures(2));
    </script>
</body>
</html>
